<template>
  <div class="container">
    <nav-bar :isLeftIcon="false" backgroundColor="#1989fa" title="测试页面"></nav-bar>
    <van-cell title="页面跳转" is-link to="page1" />
    <van-form @submit="onSubmit">
      <pub-area
        :maxSelectLevel="2"
        isLimitSelectCurrentLevel
        @confirm="changeArea"
        customRightIcon
        label="居住地址"
        isLink
        :valueIsLast="false"
        :areaInfoSelected="state.areaInfoSelected"
        v-model:value="state.form.fullArea"
      ></pub-area>
      <pub-date
        label="年份"
        type="date"
        v-model:value="state.form.year"
      ></pub-date>
      <pub-date
        label="月份"
        type="date"
        :columnsType="['year', 'month']"
        v-model:value="state.form.month"
      ></pub-date>
      <pub-date
        label="日期"
        type="date"
        :columnsType="['year', 'month', 'day']"
        v-model:value="state.form.day"
      ></pub-date>
      <pub-date
        label="时间"
        type="datetime"
        :columnsType="['year', 'month', 'day', 'hour', 'minutes']"
        v-model:value="state.form.time"
      ></pub-date>
      <pub-radio label="单选" v-model:value="state.form.radio"></pub-radio>
      <pub-checkbox
        label="多选"
        code="JGLX"
        v-model:value="state.form.check"
      ></pub-checkbox>
      <pub-upload label="附件"></pub-upload>
      <van-button native-type="submit" type="primary" block round>
        提交
      </van-button>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import router from '@/router/index'

const state = reactive({
  areaInfoSelected: {
    provinceObj: {
      id: '440000000000',
      name: '广东省'
    },
    cityObj: {
      id: '440100000000',
      name: '广州市'
    },
    areaObj: {
      id: '440103000000',
      name: '荔湾区'
    },
    streetObj: {
      id: '440103001000',
      name: '沙面街道'
    },
    villageObj: {
      id: '440103001003',
      name: '翠洲社区居委会'
    }
  },
  form: {
    city: '440100000000',
    cityName: '广州市',
    community: '440103001003',
    communityName: '翠洲社区居委会',
    county: '440103000000',
    countyName: '荔湾区',
    province: '440000000000',
    provinceName: '广东省',
    street: '440103001000',
    streetName: '沙面街道',
    fullArea: '',
    year: '',
    month: '',
    day: '',
    time: '',
    radio: '1',
    check: '1'
  }
})
const to = val => {
  router.push(val)
}

const onSubmit = () => {
  console.log(state.form)
}

const changeArea = val => {
  console.log(val)
  // state.form.areaCode = val
}
</script>
<style lang="less" scoped>
.container {
}
</style>